<ul id="testTree" class="nav nav-list bs-docs-sidenav" style="min-width: 250px;margin-top: 10px;box-shadow:0 0 0;overflow:hidden">
    <li class="nav-header" style="font-size:14px; color: #222222;margin:5px 25px 0px 0;">Entity<i class="icon-plus-sign pull-right curse_pointer" style="display:none;margin-right: 42px" title="click to add"></i></li>
    <ul>
        <li>
            <a class="icon" ></a>
            <div class="element">data
                <span>
                    <i class="icon-zoom-in" title="Expend"></i>
                    <i class="icon-plus" title="Add Child"></i>
                    <i class="icon-trash" title="Remove"></i>
                </span>
            </div>
            <ul style="display: none">
            </ul>
        </li>

        <li>
            <a class="icon plus"></a>
            <div class="element">upper property
                <span>
                    <i class="icon-zoom-in" title="Expend"></i>
                    <i class="icon-plus" title="Add Child"></i>
                    <i class="icon-trash" title="Remove"></i>
                </span>
            </div>
            <ul style="display: none">
                <li>
                    <input type="hidden"  class="element" value="integrity">
                    <a class="icon" ></a>
                    <div class="element">integrity
                        <span>
                            <i class="icon-zoom-in" title="Expend"></i>
                            <i class="icon-plus" title="Add Child"></i>
                            <i class="icon-trash" title="Remove"></i>
                    </span>
                    </div>
                    <ul style="display: none">
                    </ul>
                </li>
            </ul>
        </li>

        <li>
            <a class="icon plus"></a>
            <div class="element">user
                <span>
                    <i class="icon-zoom-in" title="Expend"></i>
                    <i class="icon-plus" title="Add Child"></i>
                    <i class="icon-trash" title="Remove"></i>
                </span>
            </div>
            <ul style="display: none">
                <li>
                    <a class="icon"></a>
                    <div class="element">legal user
                        <span>
                            <i class="icon-zoom-in" title="Expend"></i>
                            <i class="icon-plus" title="Add Child"></i>
                            <i class="icon-trash" title="Remove"></i>
                        </span>
                    </div>
                    <ul style="display: none"></ul>
                </li>
                <li>
                    <a class="icon"></a>
                    <div class="element">illegal user
                        <span>
                            <i class="icon-zoom-in" title="Expend"></i>
                            <i class="icon-plus" title="Add Child"></i>
                            <i class="icon-trash" title="Remove"></i>
                        </span>
                    </div>
                    <ul style="display: none"></ul>
                </li>
            </ul>
        </li>
        <li>
            <a class="icon plus"></a>
            <div class="element">software
                <span>
                    <i class="icon-zoom-in" title="Expend"></i>
                    <i class="icon-plus" title="Add Child"></i>
                    <i class="icon-trash" title="Remove"></i>
                </span>
            </div>
            <ul style="display: none">
                <li>
                    <a class="icon"></a>
                    <div class="element">application software
                        <span>
                            <i class="icon-zoom-in" title="Expend"></i>
                            <i class="icon-plus" title="Add Child"></i>
                            <i class="icon-trash" title="Remove"></i>
                        </span>
                    </div>
                    <ul style="display: none"></ul>
                </li>
            </ul>
        </li>
    </ul>
    <hr/>
    <li class="nav-header" style="font-size:14px; color: #222222;margin:5px 0 0px 0;">Property<i class="icon-plus-sign pull-right curse_pointer" style="display:none;margin-right: 42px" title="click to add"></i></li>
    <ul>
        <li>
            <a class="icon plus"></a>
            <div class="element">upper property
                <span>
                    <i class="icon-zoom-in" title="Expend"></i>
                    <i class="icon-plus" title="Add Child"></i>
                    <i class="icon-trash" title="Remove"></i>
                </span>
            </div>
            <ul style="display: none">
                <li>
                    <input type="hidden"  class="element" value="integrity">
                    <a class="icon" ></a>
                    <div class="element">integrity
                        <span>
                            <i class="icon-zoom-in" title="Expend"></i>
                            <i class="icon-plus" title="Add Child"></i>
                            <i class="icon-trash" title="Remove"></i>
                    </span>
                    </div>
                    <ul style="display: none">
                    </ul>
                </li>
                <li>
                    <a class="icon" ></a>
                    <div class="element">others...
                <span>
                    <i class="icon-zoom-in" title="Expend"></i>
                    <i class="icon-plus" title="Add Child"></i>
                    <i class="icon-trash" title="Remove"></i>
                </span>
                    </div>
                    <ul style="display: none">
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <hr/>
    <li class="nav-header" style="font-size:14px; color: #222222;margin:5px 0 0px 0;">Impact<i class="icon-plus-sign pull-right curse_pointer" style="display:none;margin-right: 42px" title="click to add"></i></li>
    <ul>
        <li>
            <a class="icon" ></a>
            <div class="element">lost of integrity
                <span>
                    <i class="icon-zoom-in" title="Expend"></i>
                    <i class="icon-plus" title="Add Child"></i>
                    <i class="icon-trash" title="Remove"></i>
                </span>
            </div>
            <ul style="display: none">
            </ul>
        </li>
    </ul>
    <hr/>
    <li class="nav-header" style="font-size:14px; color: #222222;margin:5px 0 0px 0;">Threat<i class="icon-plus-sign pull-right curse_pointer" style="display:none;margin-right: 42px" title="click to add"></i></li>
    <ul>
        <li>
            <a class="icon" ></a>
            <div class="element">sniffer
                <span>
                    <i class="icon-zoom-in" title="Expend"></i>
                    <i class="icon-plus" title="Add Child"></i>
                    <i class="icon-trash" title="Remove"></i>
                </span>
            </div>
            <ul style="display: none">
            </ul>
        </li>
    </ul>
    <hr/>
    <li class="nav-header" style="font-size:14px; color: #222222;margin:5px 0 0px 0;">Countermeasure<i class="icon-plus-sign pull-right curse_pointer" style="display:none;margin-right: 42px" title="click to add"></i></li>
    <ul>
        <li>
            <a class="icon" ></a>
            <div class="element">encryption
                <span>
                    <i class="icon-zoom-in" title="Expend"></i>
                    <i class="icon-plus" title="Add Child"></i>
                    <i class="icon-trash" title="Remove"></i>
                </span>
            </div>
            <ul style="display: none">
            </ul>
        </li>
    </ul>
</ul>

<link href="/stylesheets/tree.css" rel="stylesheet">
<script src="/javascripts/fmtree.js"></script>
<script type="text/javascript">
    // active initial
    $(function(){
        var alert_name,alert_id;
        var alert_type = [];
        var p_delete_element;

        $(".icon-remove-sign-right").live("click",function(){
            //点击删除键
            p_delete_item= $(this).parent().parent();
            //alert_name = $(p_delete_item).attr("name");
            alert_name = $(p_delete_item).text();
            alert_id = $(p_delete_item).attr("name");
            if($(p_delete_item).hasClass("cd"))              alert_type = ['cd','Project'];
            else if($(p_delete_item).hasClass("class"))      alert_type = ['class','Class'];
            else if($(p_delete_item).hasClass("relation"))   alert_type = ['relation','Relation'];
            $('#modal-alert-content').modal('show');
        });

        $(".icon-plus-sign").live("click",function(){
            //点击添加键
            if($(this).parent().text() == 'Class'){
                $('#modal-create-class').children(".modal-body").children("input[type='text']").val('');
                $('#modal-create-class').modal('show');
            }
            else if($(this).parent().text() == 'Relation'){
                $("#modal-create-relation").children(".modal-body").find("input[type='text']").val("");
                $('#modal-create-relation').modal('show');
            }
        });

        $('#modal-alert-content').on('show', function () {
            //删除提示
            $("#modal-alert-content").children(".modal-body").children("h5").text("Delete "+alert_type[1]+":"+alert_name+"?");
        });

        $('#delete-content').live('click',function(){
            //删除的前后台交互
            var sub =  icd[alert_type[0]][alert_id];
            if(alert_type[0] === 'cd') sub = icd;
            var data =  {
                statusArray:statusArray,
                type : alert_type[0],
                process : 'remove',
                data: {
                    new: {
                        id : alert_id,
                        value :alert_name
                    },
                    sub:sub
                }
            }
            ajax_delete(data,p_delete_item);
        });

        $('#create-class').live("click",function(){
            //创建Class
            var item_val = $(this).parent().parent().parent().children(".modal-body").children("input[type='text']").val();
            if(item_val.replace( /^[" "|"　"]*/, "") === "") return alert("Input can't be void");
            //判断是否存在
            //否则创建
            var list = $(".nav-classdiagram").children("ul").children("li")
            if(checkInIcd(list,item_val) === true) return;
            var array = checkInCcd(icd['class'],ccd['class'],item_val,'class');
            var process,elem={};
            if(array.length === 0) {
                var data = {
                    statusArray:statusArray,
                    type : 'class',
                    process : 'add',
                    data: {
                        new: {
                            value : item_val,
                            id : 'id'
                        }
                    }
                };
                ajax_classAdd(data);
            }else{
                setChooseList(item_val,'class',array);
                $('#modal-single-select').modal('show');
            }
        });

        $('#create-relation').live("click",function(){
            var input = $("#modal-create-relation").children(".modal-body").find("input[type='text']");
            var attribute = [{value:$(input).eq(0).val()},{value:$(input).eq(1).val()}];
            var count=2;
            var list = $(".nav-classdiagram").children("ul").children("li");
            //获取ID值
            var length = list.length;
            var layer = 0;
            for(var i=0;i<length;i++){
                if($(list).eq(i).attr('name') === undefined) {layer++;continue;}
                if(layer != 2) continue;
                if(attribute[0].value === $(list).eq(i).text()){
                    attribute[0].id = $(list).eq(i).attr('name');
                    if(count-- === 1) break;
                }
                if(attribute[1].value === $(list).eq(i).text()) {
                    attribute[1].id = $(list).eq(i).attr('name');
                    if(count-- === 1) break;
                }
            }
            //检查类是否存在
            if(count != 0){
                var str = "Alarming! Can't be created: Not existed in your project";
                if(attribute[0].id === undefined) str += ' Class '+ attribute[0].value;
                if(attribute[1].id === undefined) str += ' Class '+ attribute[1].value;
                return alert(str);  //改为提示+闪烁
            }
            //转换为一般格式
            attribute.sort(function(a,b){return (a.value >= b.value);});
            var showValue = attribute[0].value +'-'+ attribute[1].value;
            //检查关系是否存在
            if(checkInIcd(list,showValue) === true) return;
            //转换为一般格式
            attribute.sort(function(a,b){return (a.id >= b.id);});
            var id = attribute[0].id +'-'+ attribute[1].id;
            var value = attribute[0].value +'-'+ attribute[1].value;
            //进行创建
            var data = {
                statusArray:statusArray,
                type : 'relation',
                process : 'cite',
                data: {
                    new: {value : value,id : id}
                }
            };
            ajax_relationAdd(data);
        });


        $("li").live("click",function(){
            //点击更新详细信息
            mutex_input_dblclick = 0;
            if($(this).children().children().hasClass("icon-chevron-right")){
                $(this).parent().children().removeClass("active");
                $(this).addClass("active");
                var that = this;
                var url;
                var label;
                if($(this).hasClass("cd")){
                    url = '/post/html/icd-content-classdiagram';
                    label = ['cd','Project'];
                }
                else if($(this).hasClass("class")){
                    url = '/post/html/icd-content-class';
                    label = ['class','Class'];
                }
                else if($(this).hasClass("relation")){
                    url = '/post/html/icd-content-relation';
                    label = ['relation','Relation'];
                }
                else return;
                //key
                var name={
                    key :$(this).attr('name'),
                    value:$(this).text()
                };

                $.ajax({
                    url: url,
                    type: 'post',
                    success: function(html){
                        $(".content-detail").children().remove();
                        $(".content-detail").append(html);
                        //详细显示
                        icd_content_show(label,name);
                        //推荐
                        if(label[1]==="Class") recommend("类名",name.value);
                        else recommend(label[1],name.value);
                    }
                });
            }
        });

        $(".bs-docs-sidenav li").live({
            //周边控件移至后显示
            mouseenter: function(){
                $(this).children("i").show();
                $(this).children("a").children("i").eq(1).show();
            },

            mouseleave: function(){
                $(this).children("i").hide();
                $(this).children("a").children("i").eq(1).hide();
            }
        });
    });
</script>